<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8" />
  <meta name="description" content="HyperSynapse Network 提供免费、稳定、低延迟的 Phira 多人音乐游戏服务器" />
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
  <meta name="screen-orientation" content="landscape">
  <title>房间列表 - HyperSynapse Phira</title>
  <style>
    html, body {
      margin: 0;
      padding: 0;
      font-family: 'Segoe UI', sans-serif;
      background: #000;
      color: #eee;
      overflow-x: hidden;
      scroll-behavior: smooth;
    }
    .parallax-bg {
      position: fixed;
      top: 0;
      left: 0;
      width: 100vw;
      height: 100vh;
      background-image: url('https://webstatic.cn-nb1.rains3.com/5712%C3%973360.jpeg');
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
      z-index: 0;
    }
    header {
      position: fixed;
      top: 0;
      width: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0.5rem 1.5rem;
      backdrop-filter: blur(12px);
      background: rgba(0, 0, 0, 0.4);
      z-index: 1000;
      box-sizing: border-box;
    }
    .logo-nav-container {
      display: flex;
      align-items: center;
      flex: 1;
    }
    #logo-img {
      height: 32px;
      margin-right: 1.2rem;
    }
    .nav-links {
      display: flex;
    }
    .nav-links a {
      color: #eee;
      margin-right: 1.2rem;
      text-decoration: none;
      transition: 0.3s;
      font-size: 0.95rem;
    }
    .nav-links a:hover {
      color: #fff;
      text-shadow: 0 0 4px #fff;
    }
    .user-section {
      display: flex;
      justify-content: flex-end;
      flex: 1;
    }
    .glass-button {
      display: flex;
      align-items: center;
      padding: 0.4rem 1rem;
      background: rgba(255, 255, 255, 0.1);
      backdrop-filter: blur(10px);
      border-radius: 999px;
      border: 1px solid rgba(255, 255, 255, 0.2);
      cursor: pointer;
      transition: all 0.3s ease;
      min-width: 100px;
    }
    .glass-button:hover {
      background: rgba(255, 255, 255, 0.15);
      transform: scale(1.05);
    }
    .login-btn {
      color: #eee;
      text-decoration: none;
      font-size: 0.95rem;
      white-space: nowrap;
      width: 100%;
      text-align: center;
    }
    .user-info {
      display: flex;
      align-items: center;
      position: relative;
      cursor: pointer;
      width: 100%;
    }
    .username {
      margin-right: 0.8rem;
      font-size: 0.95rem;
      color: #eee;
      max-width: 120px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .user-avatar {
      width: 30px;
      height: 30px;
      border-radius: 50%;
      object-fit: cover;
      border: 1px solid rgba(255, 255, 255, 0.3);
    }
    .dropdown-content {
      position: absolute;
      top: 100%;
      right: 0;
      background: rgba(0, 0, 0, 0.7);
      backdrop-filter: blur(12px);
      border-radius: 8px;
      padding: 0.8rem;
      min-width: 160px;
      box-shadow: 0 4px 16px rgba(0,0,0,0.5);
      z-index: 1001;
      opacity: 0;
      visibility: hidden;
      transform: translateY(10px);
      transition: all 0.3s ease;
      border: 1px solid rgba(255, 255, 255, 0.1);
    }
    .dropdown-content.show {
      opacity: 1;
      visibility: visible;
      transform: translateY(0);
    }
    .dropdown-content span {
      display: block;
      padding: 0.3rem 0.5rem;
      font-weight: bold;
      color: #ffd700;
      border-bottom: 1px solid rgba(255, 255, 255, 0.1);
      margin-bottom: 0.5rem;
    }
    .dropdown-content a {
      display: block;
      padding: 0.5rem;
      color: #eee;
      text-decoration: none;
      border-radius: 4px;
      transition: all 0.3s ease;
    }
    .dropdown-content a:hover {
      background: rgba(255, 255, 255, 0.1);
      color: #fff;
    }
    main {
      position: relative;
      z-index: 2;
      padding-top: 100px;
      display: flex;
      flex-direction: column;
      align-items: center;
      min-height: 100vh;
    }
    .status {
      margin-bottom: 1rem;
      font-size: 1.2rem;
    }
    .status.online { color: #0f0; }
    .status.offline { color: #f33; }
    
    /* 新增3D卡片容器样式 */
    #table-container {
      perspective: 1000px;
      width: 95%;
      max-width: 1200px;
      margin: 0 auto;
    }

    /* 3D毛玻璃卡片效果 */
    table {
      border-collapse: collapse;
      background: rgba(255, 255, 255, 0.05);
      border-radius: 12px;
      overflow: hidden;
      backdrop-filter: blur(8px);
      animation: fadeIn 1s ease-out;
      width: 100%;
      transform-style: preserve-3d;
      transform: translateZ(20px);
      transition: transform 0.3s ease;
      animation: gentleSway 8s infinite ease-in-out;
    }

    @keyframes gentleSway {
      0%, 100% { transform: translateZ(20px) rotateX(0.5deg) rotateY(0.5deg); }
      25% { transform: translateZ(20px) rotateX(-0.5deg) rotateY(-1deg); }
      50% { transform: translateZ(20px) rotateX(0.5deg) rotateY(1deg); }
      75% { transform: translateZ(20px) rotateX(-0.5deg) rotateY(0.5deg); }
    }

    table.tilting {
      animation: none;
      transition: transform 0.1s linear;
    }
    
    th, td {
      padding: 0.8rem 1rem;
      text-align: left;
      font-size: 0.9rem;
    }
    th {
      background: rgba(255, 255, 255, 0.1);
      font-weight: bold;
    }
    tr:nth-child(even) {
      background: rgba(255, 255, 255, 0.03);
    }
    .dl-btn, .chart-btn {
      padding: 0.3rem 0.8rem;
      font-size: 0.85rem;
      background: rgba(255, 255, 255, 0.05);
      border: 1px solid rgba(255, 255, 255, 0.2);
      color: #fff;
      border-radius: 999px;
      backdrop-filter: blur(6px);
      cursor: pointer;
      transition: 0.3s ease;
      white-space: nowrap;
    }
    .dl-btn:hover, .chart-btn:hover {
      background: rgba(255, 255, 255, 0.15);
      transform: scale(1.05);
    }
    .chart-name-btn {
      padding: 0.3rem 0.7rem;
      background: rgba(255, 255, 255, 0.1);
      backdrop-filter: blur(6px);
      color: #fff;
      border: 1px solid rgba(255, 255, 255, 0.2);
      border-radius: 999px;
      font-size: 0.85rem;
      text-decoration: none;
      display: inline-block;
      transition: 0.3s ease;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      max-width: 150px;
    }
    .chart-name-btn:hover {
      background: rgba(255, 255, 255, 0.2);
      transform: scale(1.05);
    }
    #lightbox {
      display: flex;
      position: fixed;
      top: 0; left: 0;
      width: 100vw;
      height: 100vh;
      background: rgba(0, 0, 0, 0.6);
      backdrop-filter: blur(6px);
      justify-content: center;
      align-items: center;
      z-index: 9999;
      opacity: 0;
      visibility: hidden;
      transition: opacity 0.3s ease;
    }
    #lightbox.active {
      opacity: 1;
      visibility: visible;
    }
    #lightbox img {
      max-width: 90%;
      max-height: 90%;
      border-radius: 12px;
      box-shadow: 0 0 20px rgba(255, 255, 255, 0.2);
      animation: zoomIn 0.3s ease;
    }
    @keyframes fadeIn {
      from { opacity: 0; transform: translateY(40px); }
      to { opacity: 1; transform: translateY(0); }
    }
    @keyframes zoomIn {
      from { transform: scale(0.7); opacity: 0; }
      to { transform: scale(1); opacity: 1; }
    }
    .modal {
      position: fixed;
      top: 0; left: 0;
      width: 100vw; height: 100vh;
      display: none;
      justify-content: center;
      align-items: center;
      background: rgba(0,0,0,0.5);
      backdrop-filter: blur(6px);
      z-index: 9999;
    }
    .modal-content {
      background: rgba(255,255,255,0.08);
      padding: 1rem 1.5rem;
      border-radius: 12px;
      color: #fff;
      backdrop-filter: blur(12px);
      max-width: 300px;
      width: 90%;
      animation: zoomIn 0.3s ease;
    }
    .modal-content h3 {
      margin-top: 0;
      font-size: 1.1rem;
    }
    .modal-content ul {
      list-style: none;
      padding-left: 0;
    }
    .modal-content li {
      padding: 0.2rem 0;
    }
    .highlight-host {
      font-weight: bold;
      color: #ffd700;
    }
    @media (max-width: 768px) {
      header {
        padding: 0.5rem 1rem;
        flex-wrap: wrap;
      }
      .logo-nav-container {
        flex: 0 0 100%;
        margin-bottom: 0.5rem;
      }
      .user-section {
        flex: 0 0 100%;
        justify-content: flex-end;
      }
      .nav-links a {
        margin-right: 1rem;
      }
      .username {
        max-width: 80px;
      }
      th, td {
        padding: 0.6rem 0.8rem;
        font-size: 0.8rem;
      }
    }
  </style>
</head>
<body>
  <div class="parallax-bg"></div>
  <header>
    <div class="logo-nav-container">
      <img id="logo-img" src="./logo.png" alt="logo" />
      <div class="nav-links">
        <a href="index.html">主页</a>
        <a href="rooms.html">房间列表</a>
      </div>
    </div>
    
    <div class="user-section">
      <!-- 登录按钮（未登录时） -->
      <div id="login-button" class="glass-button" onclick="openAuth()">
        <a href="javascript:void(0)" class="login-btn">登录</a>
      </div>
      <!-- 用户信息（登录后） -->
      <div id="avatar-container" style="display: none;" class="glass-button">
        <div class="user-info" onclick="toggleDropdown()">
          <span class="username" id="username-display"></span>
          <img id="user-avatar" src="" alt="用户头像" class="user-avatar" />
        </div>
        <div class="dropdown-content" id="user-dropdown">
          <span id="dropdown-username"></span>
          <a id="phira-profile-link" target="_blank">我的Phira账户</a>
          <!-- 添加账号管理链接 -->
          <a href="account.html">账号管理</a>
          <a href="javascript:void(0)" onclick="logout()">退出登录</a>
        </div>
      </div>
    </div>
  </header>
  
  <main>
    <div id="status" class="status">服务器状态：检测中...</div>
    <div id="table-container">
      <table id="rooms-table">
        <thead>
          <tr>
            <th>房间名</th>
            <th>房主</th>
            <th>人数</th>
            <th>循环</th>
            <th>谱面</th>
            <th>曲绘</th>
            <th>下载</th>
            <th>人员</th>
          </tr>
        </thead>
        <tbody>
          <tr><td colspan="8">加载中...</td></tr>
        </tbody>
      </table>
    </div>
  </main>

  <div id="lightbox" onclick="hideLightbox()">
    <img id="lightbox-img" src="" />
  </div>

  <div id="user-modal" class="modal">
    <div class="modal-content">
      <h3>房间内用户</h3>
      <ul id="user-list"></ul>
      <button class="dl-btn" onclick="closeModal()">关闭</button>
    </div>
  </div>
  
  <!-- 登录注册弹窗 -->
  <div id="auth-modal" class="modal" style="z-index: 99999">
    <div class="modal-content glass-card" id="auth-box">
      <h3 id="auth-title">用户登录（群主是猫娘ヽ(≧Д≦)ノ）</h3>
      <input id="auth-name" placeholder="用户名" />
      <input id="auth-password" type="password" placeholder="密码" />
      <input id="auth-phiraid" class="collapsed" placeholder="Phira ID (仅注册)"/>
      <p>注册本产品账户或使用本产品即代表您已同意<a href="https://phira.htadiy.cc/privacy.html">本产品用户协议</a>。</p>
      <button onclick="submitAuth()">确认</button>
      <p id="auth-msg" style="margin-top:0.5rem;font-size:0.8rem;color:#ffccaa;"></p>
      <button onclick="toggleAuthMode()" style="margin-top:1rem">切换登录 / 注册</button>
      <button class="dl-btn" onclick="closeAuth()">关闭</button>
    </div>
  </div>

  <style>
    #auth-modal input {
      box-sizing: border-box;
      display: inline-block;
      margin: 0.35rem 0;
      padding: 0.4rem 0.8rem;
      width: 100%;
      border: none;
      border-radius: 999px;
      background: rgba(255,255,255,0.1);
      color: #fff;
      backdrop-filter: blur(8px);
      font-size: 0.9rem;
      line-height: 1.4rem;
      outline: none;
      transition: all 0.3s ease;
    }

    #auth-modal input:focus {
      box-shadow: 0 0 0.5rem rgba(255, 255, 255, 0.5);
    }

    #auth-modal input.collapsed {
      display: block;
      margin: 0 0;
      max-height: 0;
      min-height: 0;
      line-height: 0;
      font-size: 0;
      padding: 0 0.8rem;
    }

    #auth-modal button {
      width: 100%;
      margin: 0.35rem 0;
      padding: 0.4rem;
      font-size: 1rem;
      line-height: 1.4rem;
      border-radius: 999px;
      border: none;
      background: rgba(255,255,255,0.08);
      color: #fff;
      backdrop-filter: blur(12px);
      cursor: pointer;
      transition: all 0.3s ease;
    }

    #auth-modal button:hover {
      background: rgba(255,255,255,0.15);
      transform: scale(1.05);
    }

    .glass-card {
      position: relative;
      background: rgba(255,255,255,0.08);
      padding: 1.2rem 1.5rem;
      border-radius: 16px;
      color: #fff;
      backdrop-filter: blur(20px);
      width: 280px;
      max-width: 90%;
      perspective: 1000px;
      transition: transform 0.1s ease;
      animation: shake 4s infinite ease-in-out;
    }

    @keyframes shake {
      0%, 100% { transform: rotateX(0deg) rotateY(0deg); }
      20% { transform: rotateX(1deg) rotateY(-1deg); }
      40% { transform: rotateX(-1deg) rotateY(1.5deg); }
      60% { transform: rotateX(0.5deg) rotateY(-1.5deg); }
      80% { transform: rotateX(-1deg) rotateY(1deg); }
    }
  </style>

  <script>
    // 默认头像URL
    const DEFAULT_AVATAR = 'https://phira.moe/assets/user-6212ee95.png';
    
    let authMode = 'login';
    let currentUser = null;

    // 页面加载时检查登录状态
    document.addEventListener('DOMContentLoaded', () => {
      const savedUser = localStorage.getItem('user');
      if (savedUser) {
        currentUser = JSON.parse(savedUser);
        updateUserDisplay();
      }
      
      // 添加3D卡片交互效果
      const tableContainer = document.getElementById('table-container');
      const roomsTable = document.getElementById('rooms-table');
      
      if (tableContainer && roomsTable) {
        tableContainer.addEventListener('mousemove', (e) => {
          if (!roomsTable.classList.contains('tilting')) {
            roomsTable.classList.add('tilting');
          }
          
          const rect = tableContainer.getBoundingClientRect();
          const x = e.clientX - rect.left;
          const y = e.clientY - rect.top;
          const centerX = rect.width / 2;
          const centerY = rect.height / 2;
          
          const rotateY = (x - centerX) / centerX * 8;
          const rotateX = (centerY - y) / centerY * 8;
          
          roomsTable.style.transform = `translateZ(20px) rotateX(${rotateX}deg) rotateY(${rotateY}deg)`;
        });
        
        tableContainer.addEventListener('mouseleave', () => {
          roomsTable.classList.remove('tilting');
          roomsTable.style.transform = 'translateZ(20px) rotateX(0) rotateY(0)';
          
          // 重新启用轻微晃动动画
          setTimeout(() => {
            roomsTable.style.animation = 'gentleSway 8s infinite ease-in-out';
          }, 300);
        });
      }
    });

    // 更新用户显示区域
    function updateUserDisplay() {
      const loginButton = document.getElementById('login-button');
      const avatarContainer = document.getElementById('avatar-container');
      
      if (currentUser) {
        // 隐藏登录按钮
        loginButton.style.display = 'none';
        
        // 显示头像容器
        avatarContainer.style.display = 'flex';
        
        // 更新用户名和头像
        document.getElementById('username-display').textContent = currentUser.name;
        document.getElementById('user-avatar').src = currentUser.image_url || DEFAULT_AVATAR;
        document.getElementById('dropdown-username').textContent = currentUser.name;
        
        // 更新Phira账户链接
        const phiraLink = document.getElementById('phira-profile-link');
        if (phiraLink && currentUser.phira_id) {
          phiraLink.href = `https://phira.moe/user/${currentUser.phira_id}`;
        }
      } else {
        // 显示登录按钮
        loginButton.style.display = 'flex';
        
        // 隐藏头像容器
        avatarContainer.style.display = 'none';
      }
    }

    // 切换下拉菜单显示状态
    function toggleDropdown() {
      const dropdown = document.getElementById('user-dropdown');
      if (dropdown) {
        dropdown.classList.toggle('show');
      }
    }

    // 点击其他地方关闭下拉菜单
    document.addEventListener('click', (e) => {
      const dropdown = document.getElementById('user-dropdown');
      const userInfo = document.querySelector('.user-info');
      if (dropdown && dropdown.classList.contains('show') && 
          !e.target.closest('.user-info') && 
          !e.target.closest('.dropdown-content')) {
        dropdown.classList.remove('show');
      }
    });

    // 退出登录
    function logout() {
      localStorage.removeItem('user');
      currentUser = null;
      updateUserDisplay();
      // 关闭下拉菜单
      const dropdown = document.getElementById('user-dropdown');
      if (dropdown) dropdown.classList.remove('show');
    }

    function openAuth() {
      document.getElementById('auth-modal').style.display = 'flex';
      document.getElementById('auth-msg').textContent = '';
      updateAuthUI();
    }

    function closeAuth() {
      document.getElementById('auth-modal').style.display = 'none';
    }

    function toggleAuthMode() {
      authMode = authMode === 'login' ? 'register' : 'login';
      updateAuthUI();
    }

    function updateAuthUI() {
      var title = document.getElementById('auth-title');
      var phiraid = document.getElementById('auth-phiraid');
      if (authMode === 'login') {
        title.textContent = '用户登录';
        phiraid.classList.add('collapsed');
      }
      else {
        title.textContent = '用户注册';
        phiraid.classList.remove('collapsed');
      }
    }

    async function submitAuth() {
      const name = document.getElementById('auth-name').value;
      const password = document.getElementById('auth-password').value;
      const phira_id = document.getElementById('auth-phiraid').value;
      const msg = document.getElementById('auth-msg');
      msg.textContent = '处理中...';

      try {
        const res = await fetch(`/usermgr/${authMode}`, {
          method: 'POST',
          headers: {'Content-Type': 'application/json'},
          body: JSON.stringify(
            authMode === 'login' 
              ? { name, password } 
              : { name, password, phira_id }
          )
        });
        const data = await res.json();
        if (data.status === 'success') {
          // 保存用户信息到本地存储
          currentUser = data.user || { name };
          localStorage.setItem('user', JSON.stringify(currentUser));
          
          // 更新显示
          updateUserDisplay();
          
          msg.textContent = '登录成功！';
          setTimeout(() => {
            closeAuth();
            msg.textContent = '';
          }, 1000);
        } else {
          msg.textContent = data.message || '操作失败';
        }
      } catch (e) {
        msg.textContent = '网络错误';
      }
    }

    // 鼠标倾斜跟随效果
    document.addEventListener('mousemove', (e) => {
      const box = document.getElementById('auth-box');
      if (!box) return;
      const x = (e.clientX / window.innerWidth - 0.5) * 20;
      const y = (e.clientY / window.innerHeight - 0.5) * 20;
      box.style.transform = `rotateX(${-y}deg) rotateY(${x}deg)`;
    });

    // 强制横屏功能
    function lockOrientation() {
      if (screen.orientation && screen.orientation.lock) {
        screen.orientation.lock('landscape').catch(e => console.log(e));
      } else if (screen.lockOrientation) {
        screen.lockOrientation('landscape');
      } else if (screen.mozLockOrientation) {
        screen.mozLockOrientation('landscape');
      } else if (screen.msLockOrientation) {
        screen.msLockOrientation('landscape');
      }
    }
    
    // 页面加载时和方向变化时强制横屏
    window.addEventListener('load', lockOrientation);
    window.addEventListener('orientationchange', lockOrientation);
    function showLightbox(src) {
      const lb = document.getElementById("lightbox");
      document.getElementById("lightbox-img").src = src;
      lb.style.display = "flex";
      requestAnimationFrame(() => lb.classList.add("active"));
    }
    function hideLightbox() {
      const lb = document.getElementById("lightbox");
      lb.classList.remove("active");
      setTimeout(() => {
        lb.style.display = "none";
        document.getElementById("lightbox-img").src = "";
      }, 300);
    }
    function showUsers(users, host) {
      const modal = document.getElementById("user-modal");
      const list = document.getElementById("user-list");
      list.innerHTML = users.map(name => 
        `<li class="${name === host ? 'highlight-host' : ''}">${name}</li>`
      ).join("");
      modal.style.display = "flex";
    }
    function closeModal() {
      document.getElementById("user-modal").style.display = "none";
    }
    async function getChartMeta(chartId) {
      try {
        const res = await fetch(`https://phira.5wyxi.com/chart/${chartId}`);
        if (!res.ok) return null;
        return await res.json();
      } catch (err) {
        return null;
      }
    }
    fetch("/roomsjson")
      .then(res => res.json())
      .then(async rooms => {
        const tbody = document.querySelector("#rooms-table tbody");
        tbody.innerHTML = "";
        if (rooms.length === 0) {
          tbody.innerHTML = "<tr><td colspan='8'>暂无房间 加入我们的QQ群：1049578201</td></tr>";
          return;
        }
        for (const room of rooms) {
          let chartText = "暂未选择";
          let chartImg = "暂未选择";
          let downloadBtn = "暂未选择";
          if (room.chart) {
            const meta = await getChartMeta(room.chart);
            if (meta) {
              chartText = meta.name
                ? `<a href="https://phira.moe/chart/${room.chart}" target="_blank" class="chart-name-btn">${meta.name}</a>`
                : `ID: ${room.chart}`;
              chartImg = meta.illustration
                ? `<img src="${meta.illustration}" style="width:50px;border-radius:6px;cursor:pointer" onclick="showLightbox(this.src)" />`
                : "无封面";
              downloadBtn = meta.file
                ? `<a href="${meta.file}" download="chart_${room.chart}.zip"><button class="dl-btn">下载</button></a>`
                : "无文件";
            }
          }
          const hostBtn = `<a href="https://phira.moe/user/${room.host_id}" target="_blank"><button class="chart-btn">${room.host_name}</button></a>`;
          const usersBtn = `<button class="chart-btn" onclick='showUsers(${JSON.stringify(room.user_names || [])}, ${JSON.stringify(room.host_name)})'>查看</button>`;
          const tr = document.createElement("tr");
          tr.innerHTML = `
            <td>${room.name}</td>
            <td>${hostBtn}</td>
            <td>${room.user_count}</td>
            <td>${room.cycle ? "是" : "否"}</td>
            <td>${chartText}</td>
            <td>${chartImg}</td>
            <td>${downloadBtn}</td>
            <td>${usersBtn}</td>
          `;
          tbody.appendChild(tr);
        }
      });
    fetch("/roomsjson", { method: "HEAD" })
      .then(() => {
        const status = document.getElementById("status");
        status.textContent = "服务器状态：在线 :)  加入我们的QQ群：1049578201";
        status.classList.add("online");
      })
      .catch(() => {
        const status = document.getElementById("status");
        status.textContent = "服务器状态：离线 :(  加入我们的QQ群：1049578201";
        status.classList.add("offline");
      });
  </script>
</body>
</html>